<template>
  <div class="body">
    <div class="login-box">
      <a-tabs
        v-model:activeKey="activeKey"
        style="color: rgba(255, 255, 255, 0.85); text-align: center"
      >
        <a-tab-pane key="1" tab="密码登录">
          <a-form
            :model="loginState"
            @finish="handleFinish"
            @finishFailed="handleFinishFailed"
            class="form"
          >
            <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
              <a-input v-model:value="loginState.u_key" placeholder="id/手机号/邮箱">
                <template #prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
              <a-input
                v-model:value="loginState.password"
                type="password"
                placeholder="密码"
              >
                <template #prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item :wrapperCol="{offset: 5 }">
              <a-button
                type="primary"
                html-type="submit"
                :disabled="loginState.u_key === '' || loginState.password === ''"
                @click="login"
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="手机验证登录">
          <a-form
            :model="CodeLogin"
            @finish="ChandleFinish"
            @finishFailed="ChandleFinishFailed"
            class="form"
          >
            <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
              <a-input v-model:value="CodeLogin.mail" placeholder="手机号">
                <template #prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
              <a-input v-model:value="CodeLogin.mailcode" placeholder="验证码" style="width:60%">
              </a-input>
              <a-button @click="getmailcode" style="width: 38%;margin-left:2%"
                >获取验证码</a-button
              >
            </a-form-item>
            
            <a-form-item :wrapperCol="{ offset: 5 }">
              <a-button
                type="primary"
                html-type="submit"
                :disabled="CodeLogin.mail === '' || CodeLogin.mailcode === ''"
                @click="Clogin"
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="3" tab="邮箱验证登录">
          <a-form
            :model="CodeLogin"
            @finish="ChandleFinish"
            @finishFailed="ChandleFinishFailed"
            class="form"
          >
            <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
              <a-input v-model:value="CodeLogin.mail" placeholder="邮箱">
                <template #prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item :wrapperCol="{ span: 14, offset: 5 }">
              <a-input v-model:value="CodeLogin.mailcode" placeholder="验证码" style="width:60%">
              </a-input>
              <a-button @click="getmailcode" style="width: 38%;margin-left:2%"
                >获取验证码</a-button
              >
            </a-form-item>
            
            <a-form-item :wrapperCol="{ offset: 5 }">
              <a-button
                type="primary"
                html-type="submit"
                :disabled="CodeLogin.mail === '' || CodeLogin.mailcode === ''"
                @click="Clogin"
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
      <a-button style="margin-left:30%" type="link" @click="()=>{router.push({ path: '/user/register' });}">还没有账号？点击注册</a-button>
    </div>
  </div>
</template>

<script>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, ref } from "vue";
import { get, post, setLocalToken, tip } from "@/common";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },

  setup() {
    //密码登录
    const router = useRouter();
    const Crouter = useRouter();
    const loginState = reactive({
      u_key: "",
      password: "",
    });

    const handleFinish = (values) => {
      console.log(values, loginState);
    };

    const handleFinishFailed = (errors) => {
      console.log(errors);
    };
    const login = () => {
      //then仅接收成功的操作结果
      post("/user/login/passwordLogin", loginState).then((res) => {
        tip.success("登录成功");

        //接受令牌
        const token = res.data;

        //存入本地
        setLocalToken(token);

        //跳转至home路由
        router.push({ path: "/user/home" });
      });
    };

    //验证码登录
    const CodeLogin = reactive({
      mail: "",
      mailcode: "",
    });

    const ChandleFinish = (values) => {
      console.log(values, CodeLogin);
    };

    const ChandleFinishFailed = (errors) => {
      console.log(errors);
    };

    const getmailcode = () => {
      get("user/login/mailcode?mail=" + CodeLogin.mail).then((res) => {
        tip.success("已发送验证码！");
      });
    };

    const Clogin = () => {
      //then仅接收成功的操作结果
      post("/user/login/mailcodeLogin", CodeLogin).then((res) => {
        tip.success("登录成功");

        //接受令牌
        const Ctoken = res.data;

        //存入本地
        setLocalToken(Ctoken);

        //跳转至home路由
        Crouter.push({ path: "/user/home" });
      });
    };

    return {
      loginState,
      handleFinish,
      handleFinishFailed,
      login,
      useRouter,
      router,
      activeKey: ref("1"),
      CodeLogin,
      ChandleFinish,
      ChandleFinishFailed,
      Clogin,
      getmailcode,
      Crouter,
      useRouter,
    };
  },
});
</script>

<style>
.login-box {
  width: 40%;
  min-width: 500px;
  max-width: 500px;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 20px;
  height: 430px;
  background-color: #00000068;
}
.body {
  position: flex;
  top: 2cm;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url("/public/ulogin-backimg.jpg");
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.form{
  padding: 50px 0 0 0;
}
</style>